<template>
  <Card>
    <div id="charts" style="width: 100%;height: 500px"></div>
  </Card>
</template>

<script>
  import echarts from 'echarts'
  import fetch from '../../utils/fetch'
  //var echarts = require('echarts');


  export default {
    name: 'FactorySale',
    data:{

    },
    methods:{

    },
    mounted:function () {
      fetch({
        url:"/stat/productSale",
        method:"get"
      }).then(resp=>{
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('charts'));
        // 绘制图表
        myChart.setOption(
                {
                  title : {
                    text: '产品销售排行统计',
                    subtext: '',
                    x:'center'
                  },
                  tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: resp.data.titles
                  },
                  series : [
                    {
                      name: '产品销售排行统计',
                      type: 'pie',
                      radius : '55%',
                      center: ['50%', '60%'],
                      data:resp.data.values,
                      itemStyle: {
                        emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                }

        );


      })

    }
  };
</script>

<style scoped>

</style>
